<template>
  <div style="display: inline-block">
    <a-popover
      overlay-class-name="pop-cascader"
      placement="bottomLeft"
      trigger="click"
      :visible="clicked"
    >
      <template slot="content">
        <slot></slot>
      </template>
      <a-input
        ref="reference"
        v-model="selectedLabel"
        type="text"
        read-only
        :placeholder="palaceholder"
        size="large"
        class="common-input"
        @click="handleClickChange"
      >
        <template slot="suffix">
          <img v-if="clicked" :src="icon.up" />
          <img v-if="!clicked" :src="icon.down" />
        </template>
      </a-input>
    </a-popover>
  </div>
</template>
<script>
import up from "/static/img/select_up.svg";
import down from "/static/img/select_down.svg";
export default {
  props: {
    palaceholder: {
      type: String,
      default: "请选择"
    }
  },
  data() {
    return {
      icon: {
        up,
        down
      },
      clicked: false,
      selectedLabel: ""
    };
  },
  methods: {
    // 点击input弹出popover
    handleClickChange() {
      this.clicked = !this.clicked;
    },
    closePopover() {
      this.clicked = false;
    },
    setLabel(label) {
      this.selectedLabel = label;
    }
  }
};
</script>
<style scoped lang="less">
.common-input /deep/ .ant-input {
  font-size: 14px;
}
</style>
<style lang="less">
.pop-cascader .ant-popover-arrow {
  display: none !important;
}
.pop-cascader .ant-popover-inner-content {
  padding: 0px !important;
}
</style>
